<template>
<div>

<Tree :data="treedata" :render="renderContent"></Tree>


<Modal
    v-model="showModal"
    title="菜单"
    :loading="true"
    @on-ok="save"
    @on-cancel="showModal = false">
    <Form ref="current" :model="current" :rules="ruleValidate" :label-width="100">
        <FormItem label="菜单名称" prop="name">
            <Input v-model="current.name" placeholder="请输入菜单名称"></Input>
        </FormItem>
        <FormItem label="地址" prop="href">
            <Input v-model="current.href" ></Input>
        </FormItem>
        <FormItem label="图标" prop="icon">
            <Input v-model="current.icon" ></Input>
        </FormItem>
        <FormItem label="是否显示" prop="isshow">
            <RadioGroup v-model="current.isshow">
                <Radio label="1">显示</Radio>
                <Radio label="0">隐藏</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="排序" prop="sort">
            <Input v-model="current.sort" ></Input>
        </FormItem>
    </Form>
</Modal>

</div>
</template>

<script>


export default {
	
	name : 'menuconfig',
	
	data () {
		return {
		  	treedata : [],
		  	current : {},

		  	what : '',

		  	showModal : false,

		  	ruleValidate : {
		  		name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ],
		  	},

		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 'menuConfigList',
				cb : res => {
					console.log(res);
					res.forEach(item => {
						item['title'] = item.name;
						item['expand'] = true;

					})
					const result = this.$util.transData(res, 'id', 'pid', 'children');
					console.log(result);
					this.treedata = result;
				}
			});
		},

		renderContent (h, { root, node, data }) {
            return h('span', 
            {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, 
	        [
                h('span', data.title),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px'
                    }
                }, [

                	h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-create-outline'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => { 
                            	this.current = data; 
                            	this.showModal = true;
                            }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-add'
                        }),
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {
                            	this.current = {
                            		pid : data.id,
                            		sort : 0,
                            		isshow : '1',
                            	}
                            	this.showModal = true;
                            }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({}, this.buttonProps, {
                            icon: 'ios-remove'
                        }),
                        on: {
                            click: () => {
								this.$Modal.confirm({
									title: '删除',
									content: '一旦删除不能恢复',
									onOk: () => {
										this.current = {
											id : data.id,
											del : '1',
										}
										this.save();
									},
									onCancel: () => {
										//this.$Message.info('Clicked cancel');
									}
								});
                            }
                        }
                    })
                ]),

                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px',
                    }
                },[

                	h('Icon', {
                		props: {
                            type: data.isshow == '1' ? 'ios-eye-outline' : 'ios-eye-off-outline'
                        },
                        style: {
                            fontSize : '24px',
                            marginTop : '5px',
                            color : data.isshow == '1' ? 'green' : 'red',
                            display : data.id == '1' ? 'none' : 'block',
                        }
                    }),

                ]),

                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px',
                        marginTop : '7px',
                    }
                }, data.id == '1' ? '排序' : data.sort),

                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px',
                        paddingTop : '7px',
                    }
                },[
                	h('span', data.href),
                ]),
            ]);
        },


        save () {

        	this.$http({
        		fun : 'createMenu',
        		...this.current,
        		cb : res => {
        			console.log(res);
        			this.showModal = false;
        			this.init();
        			this.$Message.success('操作成功');
        		}
        	});
        },
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>

</style>
